<style>
    .tab {
        border-radius: 2px 2px 2px 2px;border: solid 1px #adadad; width: 81%;background-color: rgba(197, 197, 197, 0.25);
        height: auto; padding: 10px;margin-top: -4%;
    }
</style>
<div class="page" data-ng-controller="addRole">
    <section class="panel panel-default">
        <div class="panel-heading"><strong><span
                class="glyphicon glyphicon-th"></span>&nbsp;&nbsp;&nbsp;&nbsp;创建角色</strong></div>
        <div class="panel-body">
            <div>
                <a onclick="pre();" id="choose1" class="btn btn-primary col-lg-2">创建角色</a><br/><br/>
                <a onclick="next();" id="choose2" class="btn btn-primary col-lg-2" disabled>设置权限</a>
            </div>
            <form name="roleForm" data-ng-submit="addRole()">
                <div id="change1" class="tab pull-right">
                    <div class="col-lg-8 form-horizontal form-validation">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label>角色名称</label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text"
                                       class="form-control"
                                       id="name"
                                       placeholder="角色名称不为空"
                                       data-ng-model="role.name"
                                       required
                                       onkeyup="setNext()">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label>描述</label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text"
                                       class="form-control"
                                       data-ng-model="role.note"
                                        >
                            </div>
                        </div>
                    </div>
                </div>
                <div id="change2" class="tab pull-right" hidden="hidden">
                    <table class="table table-hover">
                        <tr class="mail-unread" data-ng-repeat="info in per">
                            <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox"
                                                                  value="{{info.id}}"><span></span></label></td>
                            <td>{{info.perName}}</td>
                            <td>{{info.perUrl}}</td>
                            <td>{{info.perDesc}}</td>
                        </tr>
                        <!--<tr>-->
                        <!--<td><label class="ui-checkbox"><input name="checkbox1" type="checkbox" value="option1" ><span></span></label></td>-->
                        <!--<td>Private <i class="fa fa-circle color-warning"></i></td>-->
                        <!--<td>Voluptatum reprehenderit</td>-->
                        <!--<td><i class="fa fa-paperclip"></i></td>-->
                        <!--<td>2/11/14 2:00 PM</td>-->
                        <!--<td><i class="fa fa-star"></i></td>-->
                        <!--</tr>-->
                    </table>
                </div>
                <div style="clear: right;margin-top: 15px;" class="pull-right">
                    <a onclick="pre();" class="btn btn-primary">上一步</a>
                    <a id="next" style="margin-left: 10px;" onclick="next();changeNext();"
                       class="btn btn-primary">下一步</a>
                    <input type="submit" id="finish" data-ng-disabled="roleForm.$invalid" value="完成" class="btn btn-primary"/>
                </div>
            </form>
        </div>
    </section>
</div>
<script>
    $(function () {
        $("#next").attr("disabled", true);$("#finish").hide();
        $("#choose1").css("background-color", "rgba(72, 205, 235, 0.45)");
    });function setNext() {
        if ($("#name").val().trim().length > 0) {$("#next").attr("disabled", false);
        }else {$("#next").attr("disabled", true);}
    }function changeNext() {
        $("#finish").show();$("#next").hide();
    }function next() {
        $("#change1").hide();$("#change2").show();
        $("#choose2").attr("disabled", false);
        $("#choose2").css("background-color", "rgba(72, 205, 235, 0.45)");
        $("#choose1").css("background-color", "");changeNext();
    }function pre() {
        $("#change2").hide();$("#change1").show();
        $("#choose1").css("background-color", "rgba(72, 205, 235, 0.45)");
        $("#choose2").css("background-color", "");$("#finish").hide();$("#next").show();
    }
</script>